<template>
  <div class="form-signature form-components">
    <div v-if="readonly" class="form-readonly"></div>
    <div v-if="disabled" class="form-disabled"></div>
    <div class="form-signature-img" @click="handleOpen">
      <!--用来预览签字图片的地方 -->
      <el-image v-if="value" :src="value" />
      <div class="form-signature-empty" v-else>{{$attrs.placeholder}}</div>
    </div>

    <EsignDialog ref="EsignDialog" v-bind="$attrs" @update="callBack" />
  </div>
</template>

<script>
import EsignDialog from "./components/esignDialog.vue";
export default {
  name: "form-signature",
  components: {
    EsignDialog
  },
  props: {
    value: {
      type: String,
      default: ""
    },

    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 800
    }
    // height: {
    //   type: Number,
    //   default: 300
    // }
  },
  data() {
    return {};
  },
  methods: {
    handleOpen() {
      if (this.readonly || this.disabled) return;
      this.$refs.EsignDialog.open();
    },
    callBack(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/generator.scss";

.form-signature-empty {
  &:hover {
    border-color: $themeColor;
  }
}
.form-signature-img {
  max-width: 400px;
  aspect-ratio: 8/3;
  .el-image {
    width: 100%;
    height: 100%;
    overflow: visible;
    cursor: pointer;
    &:hover {
      border: 1px dashed $themeColor;
      border-radius: 6px;
    }
  }
}
</style>